<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
	<style type="text/css">
		body{
			margin-top:50px;
		}
		input,
		.page-header{
			background-color:rgb(240, 245, 248);
		}
		
		#beijing{
			width:400px;
			height:100px;
		}
		
		#telsort{
			display : inline;
		}
	</style>
	
</head>
<body>
	<div class="navbar navbar-fixed-top">
	  <div class="navbar-inner">
		<div class="container">
			<a class="brand" href="#">
			  <img src="img/red_cross.png" alt="" />&nbsp;药店管理系统
			</a>
			<ul class="nav">
			  <li ><a href="drugs.action">药品</a></li>
			  <li><a href="add_drugs_list.action">进货单</a></li>
			  <li><a href="drugs_go_list.action">出货单</a></li>
			  <li><a href="vendor_list.action">供货商</a></li>
			  <li><a href="client_list.action">客户</a></li>
			  <li class="dropdown" id="menutest1">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#menutest1">
				  添加
				  <b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
				  <li><a href="new_drug.action"><i class="icon-user"></i>&nbsp;药品</a></li>
				  <li><a href="new_drugs_list.action"><i class="icon-user"></i>&nbsp;进货单</a></li>
				  <li><a href="go_drugs_list.action"><i class="icon-user"></i>&nbsp;出货单</a></li>
				  <li class="divider"></li>
				  <li><a href="new_vendor.action"><i class="icon-home"></i>&nbsp;供货商</a></li>
				  <li><a href="new_client.action"><i class="icon-ok"></i>&nbsp;客户</a></li>
				</ul>
			  </li>
			  
			</ul>
			
			<ul class="nav pull-right" >
			  <li>
				<a href="#">名字</a>
			  </li>
			  <li class="dropdown" id="menutest2">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#menutest2">
				  管理
				  <b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
				  <li><a href="#"><i class="icon-user"></i>&nbsp;员工</a></li>
				  <li class="divider"></li>
				  <li><a href="#"><i class="icon-asterisk"></i>&nbsp;账号</a></li>
				</ul>
			  </li>
			  <li class="divider-vertical"></li>
			  <li><a href="#">退出</a></li>
			</ul>
			
		</div>
	  </div>
	</div>
	
	<div class="container">
		
			<div class="row">
				  <div class="span3">
						<div class="page-header well">
							<ul class="nav nav-pills nav-stacked">
							  <li class="active">
								<a href="#">药品</a>
							  </li>
							  <li><a href="#">进货单</a></li>
							  <li><a href="#">出货单</a></li>
							  <li><a href="#">供货商</a></li>
							  <li><a href="#">客户</a></li>
							</ul>
						</div>	
						
				  </div>
				  <div class="span9">
					
						<div class="page-header well">
						  <h2><img src="img/vendor_list.png" alt="" />&nbsp;添加新供货商</h2>	
						</div>	
						
	<div class="page-header well">
		<form class="form-horizontal">
		  <fieldset>
			<legend>供货商信息</legend>
			<div class="control-group">
			  <label class="control-label">供货商名称</label>
			  <div class="controls">
				<input type="text">
			  </div>
			</div>
			
			<div class="control-group string optional marco_polo_container">
				<label for="person_phone" class="string optional control-label"> 电话</label>
				<div class="controls">
					<div  id="contact_phone_list_company">
							<div style="" class="contact_methods"></div>
							<div class="addphone" ><a href="javascript:;">添加一个电话...</a></div>
					</div>
				</div>
			</div>
			
			
			  <div class="control-group string optional marco_polo_container">
				<label for="person_phone" class="string optional control-label">邮箱</label>
				<div class="controls">
					<div  id="addemail">
							<div style="" class="contact_methods"></div>
							<div class="addemail" ><a href="javascript:;">添加一个邮箱...</a></div>
					</div>
				</div>
			</div>
			
			
			<div class="control-group string optional marco_polo_container">
				<label for="person_phone" class="string optional control-label">IM</label>
				<div class="controls">
					<div  id="addim">
							<div style="" class="contact_methods"></div>
							<div class="addim" ><a href="javascript:;">添加一个即时聊天工具...</a></div>
					</div>
				</div>
			</div>
			
			
			<div class="control-group string optional marco_polo_container">
				<label for="person_phone" class="string optional control-label">网址</label>
				<div class="controls">
					<div  id="addwebsite">
							<div style="" class="contact_methods"></div>
							<div class="addwebsite" ><a href="javascript:;">添加一个网址...</a></div>
					</div>
				</div>
			</div>
			
			
			<div class="control-group string optional marco_polo_container">
				<label for="person_phone" class="string optional control-label">地址</label>
				<div class="controls">
					<div  id="addaddress">
							<div style="" class="contact_methods"></div>
							<div class="addaddress" ><a href="javascript:;">添加一个地址...</a></div>
					</div>
				</div>
			</div>
			
			
			
			<div class="control-group">
			  <label class="control-label">背景信息</label>
			  <div class="controls">
				<textarea id="beijing" rows="20"cols="40"></textarea>
				 <p >简介，主要药品等</p>
			  </div> 
			</div>
			
			
			<div class="control-group">
			  <label class="control-label"></label>
			  <div class="controls">
				<form action="" method="POST"> 
				<button class="btn btn-primary" type="submit">
				  保存供货商
				</button>
				<button class="btn btn-success" type="submit">
				  保存并添加供货商
				</button>
				<button class="btn" type="submit">
				  取消
				</button>
				</form> 
			  </div> 
			</div>
			  
			
		  </fieldset>
		</form>					
	</div>	
						
						
						
				  </div>
				
				</div>
			</div>
	
		</div>
		
	<script type="text/javascript">
		$(document).ready(function(){
			$("#new_task").click(function(){
				$('#myModal').modal({
					backdrop:true,
					keyboard:true,
					show:false
				});
			});
			
			$(".addphone").click(function(){
				var div = $("<div class='contact_methods'></div>");
				$("#contact_phone_list_company").append(div);
				create(div);
				$("<span class='addremove'><a class='remove' href='javascript:;' onclick='deltelphone(this)'><img style='width:25px' src='img/clear.png'/></a></span>").appendTo(div);	
			});
			
			$(".addemail").click(function(){
				var div = $("<div class='contact_methods'></div>");
				$("#addemail").append(div);
				create(div);
				$("<span class='addremove'><a class='remove' href='javascript:;' onclick='deltelemail(this)'><img style='width:25px' src='img/clear.png'/></a></span>").appendTo(div);	
			});
			
			$(".addim").click(function(){
				var div = $("<div class='contact_methods'></div>");
				$("#addim").append(div);
				create(div);
				$("<span class='addremove'><a class='remove' href='javascript:;' onclick='deltelim(this)'><img style='width:25px' src='img/clear.png'/></a></span>").appendTo(div);	
			});
			
			$(".addwebsite").click(function(){
				var div = $("<div class='contact_methods'></div>");
				$("#addwebsite").append(div);
				create(div);
				$("<span class='addremove'><a class='remove' href='javascript:;' onclick='deltelwebsite(this)'><img style='width:25px' src='img/clear.png'/></a></span>").appendTo(div);	
			});
			
			$(".addaddress").click(function(){
				var div = $("<div class='contact_methods'></div>");
				$("#addaddress").append(div);
				create(div);
				$("<span class='addremove'><a class='remove' href='javascript:;' onclick='delteladdress(this)'><img style='width:25px' src='img/clear.png'/></a></span>").appendTo(div);	
			});
			
			
			

		});
		
			$(".addphone").click(function(){
				var div = $("<div class='contact_methods'></div>");
				$("#contact_phone_list_company").append(div);
				$("<input type='text' size='30' name='tel' id='addphone' >").appendTo(div);
				var select = $("<select  id='telsort' name='teltype' style='width:90px'>");
				select.append("<option value='公司'>公司</option>");
				select.append("<option value='工作'>工作</option>");
				select.append("<option value='手机'>手机</option>");
				select.append("<option value='住宅'>住宅</option>");
				select.append("<option value='传真'>传真</option>");
				select.append("<option value='其它'>其它</option>");
				div.append(select);
				$("<span class='addremove'>&nbsp;&nbsp;<a class='remove' href='javascript:;' onclick='deltelphone(this)'><img style='width:25px' src='img/clear.png'/></a></span>").appendTo(div);	
			});
		
			$(".addemail").click(function(){
				var div = $("<div class='contact_methods'></div>");
				$("#addemail").append(div);
				$("<input type='text' size='30' name='mail' id='addmail' >").appendTo(div);
				var select = $("<select  id='telsort' name='mailtype' style='width:90px'>");
				select.append("<option value='GMail'>GMail</option>");
				select.append("<option value='163'>163</option>");
				select.append("<option value='Yahoo!'>Yahoo!</option>");
				select.append("<option value='Sina'>Sina</option>");
				select.append("<option value='其它'>其它</option>");
				div.append(select);
				$("<span class='addremove'>&nbsp;&nbsp;<a class='remove' href='javascript:;' onclick='deltelemail(this)'><img style='width:25px' src='img/clear.png'/></a></span>").appendTo(div);	
			});
			
			$(".addim").click(function(){
				var div = $("<div class='contact_methods'></div>");
				$("#addim").append(div);
				$("<input type='text' size='30' name='im' id='addim' >").appendTo(div);
				var select = $("<select  id='telsort' name='imtype' style='width:90px'>");
				select.append("<option value='MSN'>MSN</option>");
				select.append("<option value='QQ'>QQ</option>");
				select.append("<option value='飞信'>飞信</option>");
				select.append("<option value='POPO'>POPO</option>");
				select.append("<option value='UC'>UC</option>");
				select.append("<option value='ICQ'>ICQ</option>");
				select.append("<option value='其它'>其它</option>");
				div.append(select);
				$("<span class='addremove'>&nbsp;&nbsp;<a class='remove' href='javascript:;' onclick='deltelim(this)'><img style='width:25px' src='img/clear.png'/></a></span>").appendTo(div);	
			});
			
			$(".addwebsite").click(function(){
				var div = $("<div class='contact_methods'></div>");
				$("#addwebsite").append(div);
				$("<input type='text' size='30' name='website' id='addwebsite' >").appendTo(div);
				var select = $("<select  id='telsort' name='websitetype' style='width:90px'>");
				select.append("<option value='公司网站'>公司网站</option>");
				select.append("<option value='个人主页'>个人主页</option>");
				select.append("<option value='博客'>博客</option>");
				select.append("<option value='其它'>其它</option>");
				div.append(select);
				$("<span class='addremove'>&nbsp;&nbsp;<a class='remove' href='javascript:;' onclick='deltelwebsite(this)'><img style='width:25px' src='img/clear.png'/></a></span>").appendTo(div);	
			});
			
			$(".addaddress").click(function(){
				var div = $("<div class='contact_methods'></div>");
				$("#addaddress").append(div);
				$("<input type='text' size='30' name='website' id='addwebsite' >").appendTo(div);
				var select = $("<select  id='telsort' name='websitetype' style='width:90px'>");
				select.append("<option value='公司网站'>公司网站</option>");
				select.append("<option value='个人主页'>个人主页</option>");
				select.append("<option value='博客'>博客</option>");
				select.append("<option value='其它'>其它</option>");
				div.append(select);
				$("<span class='addremove'>&nbsp;&nbsp;<a class='remove' href='javascript:;' onclick='delteladdress(this)'><img style='width:25px' src='img/clear.png'/></a></span>").appendTo(div);	
			});
		
		function deltelphone(obj) {
			var div =  obj.parentNode.parentNode;
			document.getElementById("contact_phone_list_company").removeChild(div);
		}
		function deltelemail(obj) {
			var div =  obj.parentNode.parentNode;
			document.getElementById("addemail").removeChild(div);
		}
		function deltelim(obj) {
			var div =  obj.parentNode.parentNode;
			document.getElementById("addim").removeChild(div);
		}
		function deltelwebsite(obj) {
			var div =  obj.parentNode.parentNode;
			document.getElementById("addwebsite").removeChild(div);
		}
		function delteladdress(obj) {
			var div =  obj.parentNode.parentNode;
			document.getElementById("addaddress").removeChild(div);
		}
		
		
	</script>
</body>
</html>